<template>
	<view class="after-delivery">

		<u-navbar title="售后" bgColor="rgba(254, 126, 41, 0.00)" titleStyle="color: #fff;font-size: 32rpx;"
			leftIconSize="36rpx" leftIconColor="#fff" @leftClick="goBack">

		</u-navbar>

		<view class="big-box">
			<image :src="imagesUrl('kefu.png')" mode="widthFix" class="kefu" />
			<view class="tip1">
				官方客服小助理
			</view>
			<view class="tip2">
				如有售后问题请添加客服微信
			</view>
			<image :src="imagesUrl('code.png')" mode="widthFix" class="code" />
			<view class="tip3">
				点击保存二维码，微信扫一扫添加客服
				或小程序长按识别
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		methods: {
			goBack() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* #ifdef H5 */
	page {
		background: 0;
	}

	/* #endif */

	.after-delivery {
		position: relative;
		width: 100vw;
		height: 100vh;

		&::before {
			position: absolute;
			top: 0;
			content: '';
			display: block;
			width: 100vw;
			height: 600rpx;
			opacity: .7;
			background-image: radial-gradient(farthest-side at 0 0, #FF7803 0%, rgba(255, 120, 3, 0.02) 100%);
			z-index: -99;
		}

		&::after {
			position: absolute;
			top: 0;
			content: '';
			display: block;
			width: 100%;
			height: 100%;
			background: #f8f8f8;
			z-index: -100;
		}

		.big-box {
			position: absolute;
			top: 260rpx;
			left: 30rpx;
			width: 690rpx;
			height: 844rpx;
			border-radius: 24rpx;
			background: #fff;

			.kefu {
				position: absolute;
				left: 50%;
				width: 128rpx;
				transform: translate(-50%, -50%);
			}

			.tip1 {
				position: absolute;
				top: 96rpx;
				left: 50%;
				transform: translate(-50%);
				font-size: 28rpx;
			}

			.tip2 {
				position: absolute;
				top: 172rpx;
				left: 50%;
				transform: translate(-50%);
				font-size: 24rpx;
				color: #666;
			}

			.code {
				position: absolute;
				top: 264rpx;
				left: 50%;
				width: 392rpx;
				height: 392rpx;
				transform: translate(-50%);
			}

			.tip3 {
				position: absolute;
				bottom: 84rpx;
				left: 50%;
				font-size: 24rpx;
				color: #999;
				transform: translate(-50%);
				text-align: center;
			}
		}
	}
</style>